水平垂直居中的几种方式

水平居中

1. 行内元素 text-align 实现

.parent {
  text-align: center;
}
.child {
  /* display: inline; */
  display: inline-block;
}

优点：兼容性好； 不足：需要同时设置子元素和父元素

2. 定宽块状元素使用 margin:0 auto 来实现

设置子元素的宽度之后设置 margin 自动。IE6 下需在父元素上设置 text-align: center。

.wrapper {
  /* IE 6 下设置即可 */
  text-align: center;
}
.child {
  width: 200px;
  margin: 0 auto;
}

优点：兼容性好 缺点: 需要指定宽度

3. 不定宽块状元素使用 table 实现

.child {
  display: table;
  margin: 0 auto;
}

优点: 只需要对自身进行设置 不足: IE6,7 需要调整结构

4. 使用绝对定位实现

  1. 不定宽块状元素 absolute + translate
.parent {
  position: relative;
}
/*或者使用 margin-left 的负值为盒子宽度的一半也可以实现，不过这样就必须知道盒子的宽度，但兼容性好*/
.child {
  position: absolute;
  left: 50%;
  transform: translate(-50%);
  /* transform: translateX(-50%); */
}

不足：兼容性差,IE9 及以上可用

  1. 定宽元素。 absolute + margin
.wrapper {
  width: 80%;
  height: 500px;
  position: relative;
}
.center {
  width: 500px;
  position: absolute;
  left: 50%;
  margin-left: -250px;
}
  1. 定宽元素。 relative + margin
.wrapper {
  width: 80%;
  height: 500px;
}
.center {
  width: 500px;
  position: relative;
  left: 50%;
  margin-left: -250px;
}

5. flex

/*第一种方法*/
.parent {
  display: flex;
  justify-content: center;
}
/*第二种方法*/
.parent {
  display: flex;
}
.child {
  margin: 0 auto;
}

缺点：兼容性差，如果进行大面积的布局可能会影响效率

6. 定宽浮动元素 relative + margin-left

  1. 为元素设置宽度
  2. position: relative;
  3. 浮动方向偏移量（left 或者 right）设置为 50%
  4. 浮动方向上的 margin 设置为元素宽度一半乘以-1
<div class="content">aaaaaa aaaaaa a a a a a a a a</div>

body {
  background: #ddd;
}
.content {
  width: 500px; /* 1 */
  float: left;

  position: relative; /* 2 */
  left: 50%; /* 3 */
  margin-left: -250px; /* 4 */

  background-color: purple;
}

垂直居中

1. 绝对定位和负边距 margin

这种方式比较好理解，兼容性也很好，缺点是需要知道子元素的宽高。 定高：margin，position + margin(负值)

/* 定高方案1 */
.center {
  height: 100px;
  margin: 50px 0;
}
/* 定高方案2 */
.center {
  height: 100px;
  position: absolute;
  top: 50%;
  margin-top: -25px;
}

2. 绝对定位和 0

这种方法兼容性也很好，缺点是需要知道子元素的宽高

.box4 span {
  width: 50%;
  height: 50%;
  background: #000;
  overflow: auto;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

3. 行内元素 vertical-align

只有一个元素属于 inline 或是 inline-block（table-cell 也可以理解为 inline-block 水平）水平，其身上的 vertical-align 属性才会起作用。

在使用 vertical-align 的时候，由于对齐的基线是用行高的基线作为标记，故需要设置 line-height 或设置 display:table-cell;

/*第一种方法*/
.parent {
  display: table-cell;
  vertical-align: middle;
  height: 20px;
}
/*第二种方法*/
.parent {
  display: inline-block;
  vertical-align: middle;
  line-height: 20px;
}

其实跟上面的一样，IFC + vertical-align:middle

/* 设置 inline-block 则会在外层产生 IFC，高度设为 100% 撑开 wrap 的高度 */
.wrap::before {
  content: "";
  height: 100%;
  display: inline-block;
  vertical-align: middle;
}
.wrap {
  text-align: center;
}
.center {
  display: inline-block;
  vertical-align: middle;
}

4. 实用绝对定位

  1. 使用绝对定位和 translate 移动（位移）的方式 （不需要知道元素的宽高）。使用 css3 新增的 transform，transform 的 translate 属性也可以设置百分比，其是相对于自身的宽和高，所以可以讲 translate 设置为-50%，就可以做到居中了。

这种方法兼容性依赖 translate2d 的兼容性。

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
}
  1. 使用绝对定位和 calc 具体计算出偏移量（需要知道元素的宽高）。这种方法兼容性依赖 calc 的兼容性，缺点是需要知道子元素的宽高。
.center {
  width: 18em;
  height: 10em;
  position: absolute;
  top: calc(50% - 5em);
  left: calc(50% - 9em);
}

<div class="center">
  要求原生有固定的宽高。<br />
  position: absolute;<br />
  top 为 calc(50% 剪 一半高) <br />
  left 为 calc(50% 剪 一半宽)
</div>
  1. 使用绝对定位和负 margin 具体计算出边距的值 （需要知道宽高）。已知高度的块级子元素，采用绝对定位和负边距
.center {
  width: 18em;
  height: 10em;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -9rem;
  margin-top: -5rem;
}

<div class="center">
  要求原生有固定的宽高。<br />
  position: absolute;<br />
  top和left 为 50%;<br />
  margin上为高的一半<br />
  margin左为宽的一半<br />
</div>

.container {
  position: relative;
}
.vertical {
  height: 300px; /*子元素高度*/
  position: absolute;
  top: 50%; /*父元素高度50%*/
  margin-top: -150px; /*自身高度一半*/
}

5. flex

  1. 直接使用 flex 的两个属性水平、垂直居中一步到位
.parent {
  display: flex;
  /* 水平居中 */
  justify-content: center;
  /* 垂直居中 */
  align-items: center;
}
  1. 父元素 flex 定位，子元素定宽并设置 margin auto
.wrapper {
  display: flex;
}
.center {
  margin: auto;
}

7. 单行文本 line-height 设置成和 height 值

8. 未知高度表格布局

.container {
  display: table;
}
.content {
  display: table-cell;
  vertical-align: middle;
}

水平垂直居中

1. 行内元素利用 vertical-align,text-align 实现

.parent {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
.child {
  display: inline-block;
}

2. 利用绝对定位实现

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  /* child 元素 x y 均移动 50% */
  transform: translate(-50%, -50%);
  /* 如果是定宽高的话，可以设置 margin 来处理 */
}

3. flex

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

图片居中

固定区域内一个图片实现上下垂直居中，图片高度不固定，但是图片高度小于固定区域的高度。

<div class="container">
  <img src="http://img4.imgtn.bdimg.com/it/u=2075750630,4216747848&fm=23&gp=0.jpg" />
</div>
  • flex 布局解决方法
.container {
  width: 300px;
  height: 300px;
  margin: 10px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
  • 设置为单元格的方式
.container {
  width: 300px;
  height: 300px;
  border: 1px solid #ccc;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

这种方式除了 IE6\IE7 之外，其他主流浏览器中基本上实现了图片的垂直居中对齐。

Last Updated:
Contributors: yiliang114